<template>
  <div class="mall-confirm-container">
    <div class="confirm-header">
      <span style="margin: 0 20px" class="el-icon-s-order">&nbsp;确认订单</span>
    </div>
    <div class="content">
      <div class="section-address">
        <p class="title">收货地址</p>
        <ul class="address-body">
          <li :style="userCity.id == confirmAddress ? 'border: 1px solid #ff6700;' : ''"
            v-for="userCity in userCityList" :key="userCity.id" @click="confirmAddress = userCity.id">
            <el-button @click="deleteUserCity(userCity.id)"
              type="text" style="position: absolute; right: 5px; top: -5px" icon="el-icon-delete">
            </el-button>
            <h2 style="font-size: 18px; font-weight: normal; margin-bottom: 10px">{{ userCity.receiverName }}</h2>
            <p style="text-indent: 1em">{{ userCity.mobile }}</p>
            <p style="margin-top: 5px; font-size: 16px">{{ userCity.city }}</p>
            <p style="text-indent: 1em">{{ userCity.address }}</p>
          </li>
          <li style="text-align: center; font-size: 30px; line-height: 100px" @click="locationDialogVisible = true">
            <i class="el-icon-circle-plus-outline"></i>
          </li>
        </ul>
      </div>
      <div class="item-list">
        <span class="title">商品</span>
        <ul>
          <li v-for="orderItem in orderItemList" :key="orderItem.id">
            <img :src="getImageUrl(orderItem.item.imageUrl)" align="middle" style="width: 70px; height: 70px"/>
            <span>{{ orderItem.item.name }}</span>
            <span>{{ orderItem.salePrice }}元 x {{ orderItem.itemCount }}</span>
            <span class="value">{{ orderItem.salePrice * orderItem.itemCount }}元</span>
          </li>
        </ul>
      </div>
      <div class="section-shipment">
        <p class="title">配送方式</p>
        <p class="shipment">包邮</p>
      </div>
      <div class="confirm-section-count">
        <ul class="confirm-money-box">
          <li>
            <span class="title">商品件数：</span>
            <span class="value">{{ settlement.itemCount }} 件</span>
          </li>
          <li>
            <span class="title">商品总价：</span>
            <span class="value">{{ settlement.totalPrice }} 元</span>
          </li>
          <li>
            <span class="title">活动优惠：</span>
            <span class="value">{{ settlement.subPrice }} 元</span>
          </li>
          <li>
            <span class="title">运费：</span>
            <span class="value">0 元</span>
          </li>
          <li>
            <span class="title">应付总额：</span>
            <span class="value"> {{ settlement.saleTotalPrice }} 元 </span>
          </li>
        </ul>
        <el-button @click="payOrder" type="warning">结算</el-button>
        <router-link to="/cart"><el-button>返回购物车</el-button></router-link>
      </div>
    </div>
    <el-dialog title="添加地址" :visible.sync="locationDialogVisible" width="500px" center>
      <el-form :model="locationForm" status-icon ref="locationForm" label-width="100px">
        <el-form-item label="收货人" prop="nickname">
          <el-input v-model="locationForm.receiverName" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="收货人手机号" prop="mobile">
          <el-input placeholder="手机" v-model="locationForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="地区" prop="location">
          <el-cascader :props="locationProp" v-model="locationForm.city"></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" v-show="locationForm.city">
          <el-input placeholder="详细地址" v-model="locationForm.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="locationDialogVisible = false" style="width: 45%">取消</el-button>
          <el-button @click="addLocation" type="primary" style="width: 45%">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { mixin } from '@/mixins'
import { SPACE, insert, deleteByIds, selectById, selectListByForeignId } from '@/api/baseApi'
import { findCity } from '@/api/otherApi'
export default {
  mixins: [mixin],
  data() {
    return {
      order: {},
      orderItemList: [],
      confirmAddress: '',
      locationDialogVisible: false,
      userCityList: [],
      locationForm: {},
      settlement: {},
      locationProp: {
        lazy: true,
        value: 'value',
        label: 'label',
        async lazyLoad(node, resolve) {
          const type = node.root ? 1 : node.data.type + 1
          const parentId = node.root ? 1 : node.data.value.id
          findCity(type, parentId).then(res => {
            if (res.state === 200) {
              const nodes = res.data.map(city => ({
                value: { id: city.id, name: city.name },
                label: city.name,
                type: city.type,
                leaf: node.level >= 2
              }))
              resolve(nodes)
            }
          })
        }
      }
    }
  },
  activated() {
    this.findOrderDetails()
    this.findUserCity()
  },
  watch: {
    orderItemList: {
      handler(newValue) {
        const settlement = { itemCount: 0, totalPrice: 0, saleTotalPrice: 0, subPrice: 0 }
        newValue.forEach(e => {
          settlement.itemCount += e.itemCount
          settlement.totalPrice += e.item.price * e.itemCount
          settlement.saleTotalPrice += e.totalPrice
        })
        settlement.subPrice = settlement.totalPrice - settlement.saleTotalPrice
        this.settlement = settlement
      },
      deep: true
    }
  },
  computed: {
    ...mapGetters({
      checkList: 'getCheckList'
    })
  },
  methods: {
    ...mapGetters(['getUser']),
    payOrder() {
      this.showSuccess('敬请期待!!!')
    },
    // 增加收货地址
    addLocation() {
      const userCity = {
        userId: this.getUser().id,
        receiverName: this.locationForm.receiverName,
        cityId: this.locationForm.city[2].id,
        city: this.locationForm.city.map(o => o.name).join(''),
        address: this.locationForm.address,
        mobile: this.locationForm.mobile
      }
      insert(SPACE.userCity, userCity).then(res => {
        if (res.state === 200) {
          this.showSuccess()
          this.userCityList.push(res.data)
          this.locationDialogVisible = false
        } else this.showError()
      })
    },
    // 删除收货地址
    deleteUserCity(id) {
      deleteByIds(SPACE.userCity, [id]).then(res => {
        if (res.state === 200) {
          this.showSuccess()
          this.userCityList = this.userCityList.filter(userCity => userCity.id !== id)
        }
      })
    },
    // 查询订单明细
    async findOrderDetails() {
      selectById(SPACE.order, this.$route.query.id).then(res => {
        this.order = res.data
        this.orderItemList = this.order.orderItemList
        console.log(JSON.stringify(this.orderItemList))
      })
    },
    // 查询收货地址
    async findUserCity() {
      selectListByForeignId(SPACE.userCity, this.getUser().id).then(res => {
        this.userCityList = res.state === 200 ? res.data : []
      })
    }
  }
}
</script>

<style scoped>
.mall-confirm-container {
  width: 1225px;
  margin: 0 auto;
  background-color: #f5f5f5;
  padding-bottom: 20px;
}
.mall-confirm-container .value {
  color: #ff6700;
}
.mall-confirm-container .confirm-header {
  background-color: #fff;
  border-bottom: 2px solid #ff6700;
  margin: 0 auto;
  margin-top: 20px;
  line-height: 60px;
}
.mall-confirm-container .content {
  margin: 0 auto;
  padding: 45px;
  background-color: #fff;
}

.mall-confirm-container .content .section-address {
  border-bottom: 1px solid #e0e0e0;
  overflow: hidden;
}
.mall-confirm-container .content .section-address .title {
  color: #333;
  font-size: 18px;
  margin-bottom: 20px;
}
.mall-confirm-container .content .address-body li {
  float: left;
  color: #333;
  width: 180px;
  height: 138px;
  border: 1px solid #e0e0e0;
  padding: 15px 24px 0;
  margin-right: 17px;
  margin-bottom: 24px;
}
.mall-confirm-container .content .address-body li:hover {
  cursor: pointer;
  z-index: 2;
  -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -2px, 0);
  border: 1px solid #ff6700;
}
.mall-confirm-container .content .address-body li p {
  font-size: 14px;
  color: #757575;
}
.mall-confirm-container .content .address-body li .address {
  padding: 10px 0;
  max-width: 180px;
  max-height: 88px;
  line-height: 22px;
  overflow: hidden;
}
.mall-confirm-container .content .item-list {
  padding-top: 10px;
}
.mall-confirm-container .content .item-list li {
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 0;
}

.mall-confirm-container .content .item-list ul li span {
  margin: 0 20px;
}

.mall-confirm-container .content .section-shipment {
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
  overflow: hidden;
}
.mall-confirm-container .content .section-shipment .title {
  float: left;
  width: 150px;
  color: #333;
}
.mall-confirm-container .content .section-shipment .shipment {
  float: left;
  font-size: 14px;
  color: #ff6700;
}

.mall-confirm-container .content .confirm-section-count {
  padding: 10px 0;
  overflow: hidden;
}

.mall-confirm-container .content .confirm-section-count li {
  margin: 5px 0;
}

.mall-confirm-container .confirm-section-count .el-button {
  float: right;
  width: 158px;
  margin-left: 20px;
}
</style>
